<template>
    <header class="my-header">
        <div class="logo"><a href="#" style="text-decoration: none;color: #fff;">LOGO</a></div>

        <form>
            <input @focus="jumpTo" type="text" placeholder="搜索">
        </form>

        <div class="my">
            <div v-if="isLogin">
                <RouterLink to="/my">用户</RouterLink>
            </div>
            <div v-else>
                <RouterLink to="/login">登录</RouterLink>
            </div>
        </div>

    </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { isLoginFn } from '../api/index';
const router = useRouter();
let isLogin = ref(false)
// 跳转搜索页
const jumpTo = () => {
    router.push({
        path: '/search'
    })
}
let token = localStorage.getItem('TOKEN');
if (token) {
    isLoginFn({ token })
    .then(
        content=>{
            // console.log('xx:',content);
            let {code} = content;
            if(code == 200) {
                // 表示已经登录
                isLogin.value = true;
            }
            else {
                isLogin.value = false;
            }
        },
    )
}

</script>

<style lang="scss">
@import '../static/common/variable.scss';

.my-header {
    width: 100%;
    padding: $pad;
    display: flex;
    background-color: $bgColor;
    height: 50px;
    align-items: center;
    font-size: 16px;

    .logo {
        flex-basis: 60px;
        color: #fff;
        font-weight: bold;
    }

    form {
        flex-grow: 1;

        input {
            height: 30px;
            width: 100%;
            border-radius: 15px;
            border: 0;
            padding-left: 10px;
            font-size: 16px;
        }
    }

    .my {
        flex-basis: 50px;
        text-align: center;

        a {
            color: #666;
            text-decoration: none;
        }
    }
}</style>

